developer tool

PC向けのブラウザに標準で備わっている便利なツール

https://gyazo.com/e555c79921b406d69caabab9eff691ce

Chromium系列のブラウザ(Chromeとか)だとF12かCtrl+Shift+iで開ける

実はWindows版のDiscordでもCtrl+Shift+iを押すと開けるMijinko_SD.icon

最近は日本語に対応している

すごく多機能でこれがないと生きていけないレベルMijinko_SD.iconnishio.iconkuuote.icontakker.icon

こんな時に使える

HTMLの要素（DOM要素）の確認

Chromium系列のブラウザでは「要素」タブから見れる

JavaScriptによって変更されたものも反映されている

直接編集して書き換えることもできる

https://www.youtube.com/watch?v=GXZZB5vO78c

公開projectに書いた課題に名前を入れてPDFにする時に使ったtakker.icon

serverに反映させることなく名前を入れられる

コピペ出来ないサイトのテキストやダウンロード禁止になっているデータを取り出すときにもよく使う

要素に適用されているプロパティの確認

CSSセレクタの詳細度による順位の確認

CSSの計算結果の確認

CSSのテスト

自分でプロパティを追加したり既存のプロパティを編集したりできる

JavaScriptコンソールを使う

適当なスクリプトを実行するのに使える

処理を一時停止、ステップ実行する

通信の監視

Chromium系列のブラウザでは「ネットワーク」タブから見れる

場合によってはページの再読み込みが必要

サーバー・ブラウザ間の通信を覗き見れる

当たり前だけど暗号化されたものもちゃんと見れる

セッションIDを抜き取るのによく使う

cookieの中身を直接見たほうが早い

ローカルストレージやcookieの中身を確認

Chromium系列のブラウザでは「アプリケーション」タブの「ストレージ」から見れる

パフォーマンスの測定

メモリとかの使用状況を記録できる